<template>
  <div class="reserve-edit">
    <van-nav-bar
      title="预约发布"
      left-text="返回"
      left-arrow
      fixed
      @click="handleBack"
    />
    <van-cell-group inset class="info">
      <!-- <van-cell
        :title="userInfo?.account"
        is-link
        to="reserve-record"
        value="预约发布记录"
      /> -->
      <van-cell
        :value="userInfo?.deptName"
        :label="`联系电话：${userInfo?.phone}`"
      >
        <template #title>
          <span class="sex">性别:{{ userInfo?.sexName }}</span>
          <span> 年龄:{{ age }} </span>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- <van-sticky :offset-top="50">
      <div class="form-top">
        <span>预约设置</span>
        <span><van-icon name="add-o" @click="handleAdd" /></span>
      </div>
    </van-sticky> -->

    <van-form ref="formRef" @failed="onFailed" @submit="handleSubmit">
      <ReserveForm
        v-for="(item, index) in formList"
        :key="index"
        v-model:form="formList[index]"
      ></ReserveForm>

      <div class="buttons" style="margin: 16px">
        <!-- <van-button size="small" @click="handleSaveDraft">
          保存草稿
        </van-button> -->
        <van-button size="small" type="primary" @click="handleSubmit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  toRefs,
  ref,
  defineProps,
  reactive,
  watch,
  watchEffect,
} from 'vue'
import { useStore } from '/@/store'
import ReserveForm from '../components/ReserveForm.vue'
import dayjs from 'dayjs'
import { dateFormatter, toForm, toParams } from '../utils'
import { IForm, ReserveForm as ReserveClass } from '../types'
import { publishSave, publishQuery, publishUpdate } from '/@/views/reserve/api'
import { FormInstance } from 'vant'
import { useBack } from '/@/use/useRouteBack'
import { useReserveForm } from '../use/useReserveForm'

const { state } = useStore()

const { userInfo } = toRefs(state)

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
})

type PropsType = typeof props

const age = computed(
  () => dayjs().year() - dayjs(userInfo.value?.birthday).year()
)

const { formRef, formList, onFailed, handleSubmit, handleSaveDraft } =
  useForm(props)

const { back: handleBack } = useBack()

function useForm(props: PropsType) {
  const formRef = ref<FormInstance>()

  const formList = reactive<IForm[]>([new ReserveClass()])

  // 确保在每次更新之前重置ref
  // onBeforeUpdate(() => {
  //   formList.length = 0
  // })

  // watch(
  //   () => props.id,
  //   async (id) => {
  //     const {
  //       data: { data },
  //     } = await publishQuery({ id })
  //     formList[0] = toForm(data[0])
  //   },
  //   {
  //     immediate: true,
  //   }
  // )

  const { form } = useReserveForm(toRefs(props).id)

  watchEffect(() => {
    formList[0] = form
  })

  return {
    formRef,
    formList,
    onFailed() {},
    async handleSubmit() {
      const list = formList.map(toParams)

      const { data } = await publishUpdate(list[0])
    },
    async handleSaveDraft() {
      const list = formList.map(toParams)

      list.map((item) => {
        item.status = 0
      })

      const { data } = await publishSave(list)
    },
  }
}
</script>

<style lang="less" scoped>
.reserve-edit {
  padding-top: 60px;
  margin-bottom: 60px;
}

.form-top {
  padding: 20px 20px 12px 20px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7f9;
}

.sex {
  margin-right: 40px;
}

.buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.info {
  margin-bottom: 20px;
}
</style>
